<!DOCTYPE HTML>
<html>
<head>
    <title>My WebSocket</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>

<body>
<input type="button" value="请选择要输出的日志级别">
<select  id="level" onchange="changeWebSocket()">
    <option value="ERROR">ERROR</option>
    <option value="WARN">WARN</option>
    <option value="INFO" selected="selected">INFO</option>
    <option value="DEBUG">DEBUG</option>
    <option value="TRACE">TRACE</option>
</select>
<div><input type="button" style="cursor: pointer;" value="清除日志内容" onclick="clearMessage()"></div>
<input id="text" type="text" hidden/>
<button onclick="send()" hidden>Send</button>
<button onclick="closeWebSocket()" hidden>Close</button>
<div id="message"></div>
</body>

<script type="text/javascript">

    function changeWebSocket(){
        if(websocket != null){
            closeWebSocket();
        }
        document.getElementById('message').innerHTML = "";
        var level = document.getElementById("level").value;
        websocket = new WebSocket("ws://" + window.location.host + "/websocket/" + level + "-" + guid());
        //连接发生错误的回调方法
        websocket.onerror = function() {
            setMessageInnerHTML("error");
        };

        //连接成功建立的回调方法
        websocket.onopen = function(event) {
            setMessageInnerHTML("open " + level);
        }

        //接收到消息的回调方法
        websocket.onmessage = function(event) {
            setMessageInnerHTML(event.data);
        }

        //连接关闭的回调方法
        websocket.onclose = function() {
            setMessageInnerHTML("close " + level);
        }

        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function() {
            websocket.close();
        }
    }

    var websocket = null;

    //判断当前浏览器是否支持WebSocket, 主要此处要更换为自己的地址
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://" + window.location.host + "/websocket/INFO-" + guid());
        //连接发生错误的回调方法
        websocket.onerror = function() {
            setMessageInnerHTML("error");
        };

        //连接成功建立的回调方法
        websocket.onopen = function(event) {
            setMessageInnerHTML("open INFO");
        }

        //接收到消息的回调方法
        websocket.onmessage = function(event) {
            setMessageInnerHTML(event.data);
        }

        //连接关闭的回调方法
        websocket.onclose = function() {
            setMessageInnerHTML("close INFO");
        }

        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function() {
            websocket.close();
        }
    } else {
        alert('Not support websocket')
    }



    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    //关闭连接
    function closeWebSocket() {
        websocket.close();
    }

    //发送消息
    function send() {
        var message = document.getElementById('text').value;
        websocket.send(message);
    }

    // 清除内容
    function clearMessage(){
        document.getElementById('message').innerHTML = "";
    }

    function guid(){
        var len=32;//32长度
        var radix=16;//16进制
        var chars='0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
        var uuid=[],i;
        radix=radix||chars.length;
        if(len){
            for(i=0;i<len;i++)uuid[i]=chars[0|Math.random()*radix];
        }else{
            var r;
            uuid[8]=uuid[13]=uuid[18]=uuid[23]='-';
            uuid[14]='4';
            for(i=0;i<36;i++){
                if(!uuid[i]){
                    r=0|Math.random()*16;
                    uuid[i]=chars[(i==19)?(r&0x3)|0x8:r];
                }
            }
        }
        return uuid.join('');
    }
</script>
</html>

